<template>
  <section class="map-wrapper">
    <!-- 省份 -->
    <a-select
      class="sel-left"
      label-in-value
      style="width: 120px"
      v-model="provinceValue"
      @change="leftSelChange"
    >
      <a-select-option
        v-for="(item, index) in provinceList"
        :key="index"
        :value="index"
      >
        {{ item.label }}
      </a-select-option>
    </a-select>
    <!-- 选项 -->
    <a-select
      class="sel-right"
      label-in-value
      style="width: 180px"
      v-model="typeValue"
      @change="rightSelChange"
    >
      <a-select-option
        v-for="(item, index) in typeLists"
        :key="index"
        :value="item.key"
      >
        {{ item.label }}
      </a-select-option>
    </a-select>

    <!-- 地图部分 -->
    <section class="map-box">
      <ul class="location-list">
        <li
          class="list-item blue"
          :class="item.color"
          v-for="(item, index) in locationList[typeValue.key]"
          :key="index"
          :style="{ left: item.left + 'px', top: item.top + 'px' }"
        >
          <!-- {{ item.label }} -->
        </li>
      </ul>
    </section>
  </section>
</template>

<script>
const provinceList = [{ key: 0, label: "四川省" }];
const typeLists = [
  { key: 0, label: "故障停运线路" },
  { key: 1, label: "停电时户执行比例" },
  { key: 2, label: "万户投诉率" },
];
export default {
  data() {
    return {
      timer: null,
      provinceList,
      typeLists,
      provinceValue: provinceList[0],
      typeValue: typeLists[2],
      locationList: {
        0: [
          { key: 0, label: "阿坝", left: 276, top: 75, color: "blue" },
          { key: 2, label: "绵阳", left: 404, top: 96, color: "blue" },
          { key: 3, label: "广元", left: 464, top: 76, color: "orange" },
          { key: 4, label: "成都", left: 352, top: 160, color: "blue" },
          { key: 5, label: "南充", left: 486, top: 130, color: "orange" },
          { key: 6, label: "甘孜", left: 150, top: 174, color: "blue" },
          { key: 7, label: "乐山", left: 342, top: 244, color: "blue" },
          { key: 8, label: "凉山", left: 246, top: 326, color: "orange" },
          { key: 9, label: "宜宾", left: 414, top: 280, color: "blue" },
        ],
        1: [
          { key: 0, label: "巴中", left: 534, top: 90, color: "orange" },
          { key: 2, label: "绵阳", left: 404, top: 92, color: "orange" },
          { key: 3, label: "广元", left: 464, top: 78, color: "blue" },
          { key: 4, label: "成都", left: 352, top: 160, color: "blue" },
          { key: 5, label: "南充", left: 486, top: 126, color: "blue" },
          { key: 6, label: "甘孜", left: 148, top: 170, color: "orange" },
          { key: 7, label: "雅安", left: 278, top: 200, color: "blue" },
          { key: 8, label: "凉山", left: 246, top: 326, color: "orange" },
          { key: 9, label: "资阳", left: 430, top: 190, color: "blue" },
        ],
        2: [
          { key: 0, label: "阿坝", left: 274, top: 70, color: "blue" },
          { key: 2, label: "德阳", left: 380, top: 130, color: "orange" },
          { key: 3, label: "资阳", left: 428, top: 190, color: "blue" },
          { key: 4, label: "成都", left: 352, top: 160, color: "blue" },
          { key: 5, label: "达州", left: 570, top: 126, color: "blue" },
          { key: 6, label: "雅安", left: 278, top: 200, color: "blue" },
          { key: 7, label: "乐山", left: 338, top: 240, color: "orange" },
          { key: 8, label: "凉山", left: 246, top: 326, color: "orange" },
          { key: 9, label: "宜宾", left: 414, top: 280, color: "blue" },
        ],
      },
    };
  },
  created() {
    this.changeData();
  },
  methods: {
    leftSelChange(index) {
      console.log(index);
    },
    rightSelChange(index) {
      console.log(index);
      clearInterval(this.timer);
    },
    // 定时器
    changeData() {
      const count = this.typeLists.length;
      let index = 0;
      this.timer = setInterval(() => {
        if (index < count - 1) {
          index++;
        } else {
          index = 0;
        }
        this.typeValue = this.typeLists[index];
      }, 1000);
    },
  },
};
</script>

<style lang="scss">
.map-wrapper {
  position: relative;
  width: 956px;
  height: 576px;
  background: url("../../assets/images/map/map-bg.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  .sel-left {
    position: absolute;
    top: 20px;
    left: 50px;
  }
  .sel-right {
    position: absolute;
    top: 20px;
    right: 50px;
  }
  .ant-select-selection {
    background: url("../../assets/images/map/selectBg.png") no-repeat;
    background-size: 100% 100%;
    border: 0;
  }

  .map-box {
    position: relative;
    width: 68%;
    height: 87%;
    margin: 6% 15% 0;
    // border: 1px solid blue;
    background: url("../../assets/images/map/map.png") no-repeat;
    background-size: 100% 100%;
    .location-list {
      .list-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 40px;
        height: 66px;
        border-radius: 50%;
        background: url("../../assets/images/map/mapIcon.png") no-repeat;
        &.blue {
          background-position: 0 0;
        }
        &.orange {
          background-position: 0 -76px;
        }
      }
    }
  }
}
</style>